<%--
  Created by IntelliJ IDEA.
  User: csnf-xs
  Date: 2024/12/11
  Time: 15:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 页面标题 -->
    <title>操作结果反馈页面</title>
    <style>
        /* 整体页面主体的样式设置 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* 内容区域的样式，比如背景、内边距、边框圆角、阴影等 */
        .content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 500px; /* 适当调整内容区域宽度，使其展示更合理 */
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
        }

        /* 提示框通用样式 */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 成功提示框的特定样式，包括文字颜色、背景颜色、边框颜色 */
        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        /* 错误提示框的特定样式，包括文字颜色、背景颜色、边框颜色 */
        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        /* 关闭按钮的样式 */
        .close-btn {
            cursor: pointer;
            font-weight: bold;
            margin-left: 10px;
        }

        /* 展示详细信息的区域样式 */
        .detail-section {
            background-color: #f4f4f4;
            border-radius: 4px;
            padding: 15px;
            margin-top: 20px;
            text-align: left;
        }

        .detail-item {
            margin-bottom: 10px;
            font-size: 16px;
            color: #333;
        }

        /* 隐藏初始状态下的详细信息区域 */
        .detail-section.hidden {
            display: none;
        }

    </style>
</head>
<body>
<div class="content">
    <h2>操作${msg}</h2>
    <!-- 用于动态显示提示信息的容器 -->
    <div id="alertContainer"></div>
    <!-- 展示详细信息的容器 -->
    <div id="detailContainer" class="detail-section hidden">
        <h3>操作详情：</h3>
    </div>
</div>
<script>
    // 页面加载完成后执行的函数
    window.onload = function () {
        const msg = '${msg}';
        const alertContainer = document.getElementById('alertContainer');
        const detailContainer = document.getElementById('detailContainer');

        // 判断消息是否为成功状态
        if (msg === 'success') {
            const successAlert = document.createElement('div');
            successAlert.className = 'alert alert-success';
            successAlert.textContent = '操作成功！';
            const closeBtn = document.createElement('span');
            closeBtn.className = 'close-btn';
            closeBtn.textContent = '×';
            closeBtn.addEventListener('click', function () {
                successAlert.style.display = 'none';
            });
            successAlert.appendChild(closeBtn);
            alertContainer.appendChild(successAlert);
            // 模拟显示成功后的详细信息（这里可以根据实际从后端获取的数据来填充）
            const studentData = {
                id: 1,
                name: '张三',
                gender: '男',
                birthday: '2000-01-01',
                clazz: '一班'
            };
            displayDetails(studentData);
        }
        // 判断消息是否为错误状态
        else if (msg === 'error') {
            const errorAlert = document.createElement('div');
            errorAlert.className = 'alert alert-danger';
            errorAlert.textContent = '操作出现错误，请检查！';
            const closeBtn = document.createElement('span');
            closeBtn.className = 'close-btn';
            closeBtn.textContent = '×';
            closeBtn.addEventListener('click', function () {
                errorAlert.style.display = 'none';
            });
            errorAlert.appendChild(closeBtn);
            alertContainer.appendChild(errorAlert);
            // 模拟显示错误相关的详细信息（比如错误原因等，实际从后端获取）
            const errorDetails = {
                errorCode: 'ERR_001',
                errorMessage: '输入信息格式不正确'
            };
            displayDetails(errorDetails);
        }

        function displayDetails(data) {
            detailContainer.classList.remove('hidden');
            for (const key in data) {
                const detailItem = document.createElement('p');
                detailItem.className = 'detail-item';
                detailItem.textContent = `${key}: ${data[key]}`;
                detailContainer.appendChild(detailItem);
            }
        }
    };
</script>
</body>
</html>